<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
    <script src="https://lib.baomitu.com/echarts/latest/echarts.js"></script>
    <style>
      *{
        margin:0;
        padding:0;
      }
    </style>
  </head>
  <body>
     <div id="main" style="width:100%;height:400px"></div>
     <script>
        let div1 = document.querySelector('#main');
        let myCharts = echarts.init(div1)
        myCharts.setOption({
            dataZoom:{},  // 缩放
            title:{
               text:'双坐标',
               subtext:'副标题',
               textStyle:{
                  color:'blue'
               },
               left:'center',
            },
            xAxis:{
                data:['游戏','直播','经济','娱乐']
            },
            yAxis:[
               {
                  //显示y轴的线
                  axisLine:{
                     show:true
                  },
                  // y轴刻度
                  axisTick:{
                     show:true
                  },
               },
               {
                   //显示y轴的线
                   axisLine:{
                     show:true
                  },
                  // y轴刻度
                  axisTick:{
                     show:true
                  },
               }
            ],
            series:[  // 绘制什么样的图表 数据展示在这里设置  bar 柱状图  line 折线图   pie 饼图
               {
                 type:'line',
                 data:[10,20,30,40],
                 yAxisIndex:0   // 用左边y轴的刻度
               },
               {
                 type:'bar',
                 data:[6,10,80,20],
                 yAxisIndex:1  // 用右边y轴的刻度
               },
            ],
            tooltip:{
               textStyle:{  // 提示框的颜色
                  color:'red'
               }
            },
            // 图表的布局
            grid:{
               left:50,
               right:50
            },
         })
     </script>
  </body>
</html>
